<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			img {
				height: 100px;
				width: 100px;
			}
			tr {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="">
				<tr>
					<td>商品编号</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>商品图片</td>
					<td>商品库存</td>
					<td>操作</td>
				</tr>
				<tr v-for="(item,i) in items">
					<td>
						{{item.id}}
					</td>
					<td>
						{{item.name}}
					</td>
					<td>
						{{item.price}}
					</td>
					<td>
						<img v-bind:src="item.imgSrc" />
					</td>
					<td>
						{{item.num}}
					</td>
					<td>
						<button @click="del(i)">删除</button>
					</td>
				</tr>
			</table>
			商品名称:<input type="text" v-model="name" /><br/>
			商品价格:<input type="text" v-model="price" /><br/>
			图片地址:<input type="text" v-model="imgSrc" /><br/>
			商品库存:<input type="text" v-model="num" /><br/>
			<button @click="add">添加</button>
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						name: '',
						price: '',
						imgSrc: '',
						num: '',
						items: [
							{
								id: 1,
								name: "iphone 14",
								price: 8888,
								imgSrc: "./img/iphone14.jpg",
								num: 3
							},
							{
								id: 2,
								name: "华为mate6",
								price: 8888,
								imgSrc: "./img/mate40.jpg",
								num: 3
							}
						]
					}
				},
				methods:{
					add:function(){
						this.items.push({
							id:this.items.length + 1,
							name:this.name,
							price:this.price,
							imgSrc:this.imgSrc,
							num:this.num
						})
					},
					del:function(i){
						this.items.splice(i,1)
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>